<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:cc="http://chart4jsf.org/chart">
   <h:head>
    
        <title>g·Raphaël Dynamic Pie Chart</title>
        
        <h:outputScript library="js" name="raphael.js"></h:outputScript>
        <h:outputScript library="js" name="g.raphael.js"></h:outputScript>
        <h:outputScript library="js" name="g.pie.js"></h:outputScript>
        <h:outputScript library="js" name="jquery.js"></h:outputScript>
        <h:outputScript library="js" name="highcharts.js"></h:outputScript>
        <h:outputScript library="js" name="highcharts.js"></h:outputScript>
        <!-- 1a) Optional: add a theme file -->
        
        <h:outputScript library="js/themes" name="gray.js"></h:outputScript>
        
        <h:outputScript library="js/modules" name="exporting.js"></h:outputScript>
        <h:outputScript library="js" name="core.js"></h:outputScript>

       
        
        
        
        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        
       
        
    </h:head>
 <h:body>
 <h:form>
    <cc:helloinput/>
  </h:form>
        <div id="holder"></div>
        <p>
            Pie chart with legend, hyperlinks on two first sectors and hover effect.
        </p>
        <p>
            Demo of <a href="http://g.raphaeljs.com/">g·Raphaël</a> JavaScript library.
        </p>
        <div id="container" style="width: 800px; height: 400px; margin: 0pt auto;">
        <script type="text/javascript">
        
            
            var data = [ 
                 { name:'Firefox',
            	   y:45.0,
            	   sliced:true,
            	   selected:false
            	 },{ name:'IE',
            		 y:26.8,
            		 sliced:false,
            		 selected:false
            	},{
                name: 'Chrome',    
                y: 12.8,
                sliced: true,
                selected: true
             },[ 'Safari', 8.5 ], [ 'Opera', 6.2 ], [ 'Others', 0.7 ] ];
            
            $(document).ready(function() {
                org.chart4jsf.chart.pie('container','Browser market shares at a specific website, 2010',data);
            });
                
        </script>
        </div>
        
        
        
    </h:body>
  </html>